<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .home{
        background-color: lightcoral;
      }
      .parent{
        background-color: lightblue;
      }
      .child{
        background-color: green;
      }
      .fade-leave-active,.fade-enter-active{
        transition: all 1s;
      }
      
      .fade-enter-to,fade-leave{
        opacity: 1;
      }
      .fade-leave-to,fade-enter{
        opacity: 0;
      }

      .slide-left-leave-active,.slide-left-enter-active,.slide-right-leave-active,.slide-right-enter-active{
        transition: all 1s;
      }
      .slide-left-enter-to,slide-left-leave{
          transform:translateX(0%)
      }
      .slide-left-leave-to,slide-left-enter{
        transform:translateX(100%)
      }
      .slide-right-enter-to,slide-right-leave{
          transform:translateX(0%)
      }
      .slide-right-leave-to,slide-right-enter{
        transform:translateX(-100%)
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/parent">/parent父亲</router-link></li>
        <li><router-link to="/parent/child1">/parent/child1大儿子</router-link></li>
        <li><router-link to="/parent/child2">/parent/child2二儿子</router-link></li>
      </ul>
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
      const Home = {
        template: `<div class='home'>Home</div>`,
      };
      const Parent = {
        data:()=>({transitionName:'slide-left'}),
        watch: {
          '$route' (to, from) {
            const toDepth = to.path.split('/').length
            const fromDepth = from.path.split('/').length
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
          }
        },
        template: `
        <div class='parent'>
          <h2>Parent</h2>
          <transition :name="transitionName" mode="out-in">
            <router-view class='child'></router-view>
          </transition>
        </div>
        `,
      };
      const Child1 = {
        template: `<div>Child1</div>`,
      };
      const Child2 = {
        template: `<div>Child2</div>`,
      };
      const routes = [
        { 
          name: "home", 
          path: "/", 
          component: Home 
        },
        { 
          name: "parent", 
          path: "/parent", 
          component: Parent,
          children:[
            {path:'child1',component:Child1},
            {path:'child2',component:Child2}
          ] 
        }
      ];

      var router = new VueRouter({
        routes,
      });
      var vm = new Vue({
        el: "#app",
        router,
      });
    </script>
  </body>
</html>
